import React, { useRef, useState } from 'react'
import Page from '@/components/Layout'
import styles from './styles.module.scss'
import basketball_liveback from '@/assets/basketball_liveback.png'
import football_liveback from '@/assets/football_liveback.png'
import basketball_video from '@/assets/basketball_video.png'
import football_video from '@/assets/football_video.png'
import Link from 'next/link'
import classNames from 'classnames'
import NewsIcon from '@/assets/news.png'
import NewsBlock from '@/components/NewsBlock'
import Videos from '@/assets/videos.png'
import Scoreboard from '@/components/Scoreboard'
import LiveBlock from '@/components/LiveBlock'
import HotScore from '@/components/HotScore'
import { getStartEndTime } from '@/common/tool'
import Live from '@/components/Live'
import { NavList } from '@/common/enum'
import Tab from '@/components/Tab'
import { getBasketballLiveList, getSlideVideoBack, getMatchList, getHomeVideoGreat, getHomeVideoBackList, getHostMatchList, getNewsList, getFootballLiveList } from '@/server/news'
import Head from 'next/head'
import RenderJudge from '@/components/RenderJudge'
import H5Index from '@/components/H5/Home'
import { useLiveListHeight } from '@/common/tool'


const NewsLink = [
  { title: "足球录像", icon: football_liveback, key: 0, type: 1 },
  { title: "篮球录像", icon: basketball_liveback, key: 1, type: 2 },
  { title: "足球锦集", icon: football_video, key: 2, type: 1 },
  { title: "篮球锦集", icon: basketball_video, key: 3, type: 2 }
]

const Index = ({ smileVideo, matchList, videoGreatData, videoBackData, hotMatch, newsList, newsTypeid, liveListData, mobile }) => {
  const videoInfo = [videoBackData.football, videoBackData.basketball, videoGreatData.football, videoGreatData.basketball]
  const [match, setMatch] = useState({ id: "", type: 1, name: "全部" })
  const [selectIndex, setSelectIndex] = useState(0)
  const { leftRef, rightRef, liveHeight } = useLiveListHeight(20)
  return (
    <>
      <Head>
        <title>鑫球体育-世界杯直播_足球直播_NBA直播_西甲直播_JRS直播</title>
        <meta name='description' content='鑫球体育网是一家综合性体育在线直播网站，提供最新无插件高清足球直播,NBA直播,世界杯直播等热门赛事直播信号,主要包括世界杯,欧冠,欧洲杯,英超,西甲,意甲,法甲,德甲,中超,亚冠,NBA,CBA等全球各大体育赛事,鑫球体育为您做足准备!' />
        <meta name="keywords" content="鑫球体育,JRS直播,NBA直播吧,足球直播,世界杯直播,CBA直播,体育直播,西甲直播" />
      </Head>



      <RenderJudge value={mobile} active={<H5Index match={match} ready videoInfo={videoInfo} liveListData={liveListData} />} inactive={
        <main className={styles.home}>
          <section className={styles.left}>
            <>
              <section ref={leftRef} style={{ '--videoNavTranslate': selectIndex * (110 + 30) + "px" }}>
                <nav className={styles.newstypes}>
                  {NewsLink.map((row, i) => (
                    <div key={i} className={selectIndex === i ? styles.active : null} onClick={() => setSelectIndex(i)}>
                      <img src={row.icon.src} alt="" />
                      <span>{row.title}</span>
                    </div>
                  ))}
                </nav>
                <article className={styles.newsbox}>
                  {
                    videoInfo[selectIndex]?.map((row, index) => (
                      <Link href={`/${selectIndex > 1 ? 'marvellous' : 'video'}/${row?.type === 1 ? 'football' : 'basketball'}/${row?.id}`} key={row.id}>
                        <a target="_blank" className={styles.newslinkitem} title={row?.title || row?.videoName}>
                          <span className={styles.title}>{`【${row.typeName || row.leagueName}】`} </span>
                          <span className={classNames(styles.newsDes, 'textoverone')}>{row?.title || row?.videoName}</span>
                          <span className={styles.videoinfo}>
                            {selectIndex > 1 ? '视频' : "录像"}
                          </span>
                        </a>
                      </Link>
                    ))
                  }
                </article>
                <blockquote style={{ height: 20 }}></blockquote>

                <Tab active={(row, current) => (row?.id === current?.id && row?.name === current?.name)}
                  boxwidth="822" name="name" tabselect={match} setTabselect={setMatch}
                  matchList={[NavList.a, ...NavList.f, ...NavList.b]} />
              </section>
              <Live container={{ height: liveHeight }} ready liveListData={liveListData} match={match}></Live>
            </>
            <LiveBlock></LiveBlock>
          </section>
          <section className={styles.right} ref={rightRef}>
            <>
              <HotScore hotMatch={hotMatch}></HotScore>
              <Scoreboard matchList={matchList}></Scoreboard>
              <NewsBlock more="/news" link={row => `/news/${row?.id}`} img={NewsIcon} text="精选新闻" hasRight data={newsList} type={newsTypeid}></NewsBlock>
              <NewsBlock more="/marvellous/football" link={(row) => `/marvellous/${row?.id}`} img={Videos} text="精选视频" hasRight data={smileVideo}></NewsBlock>
            </>
          </section>
        </main>
      } />
    </>
  )
}


Index.getLayout = (page, props) => {
  return (
    <Page header footer {...props}>
      {page}
    </Page >
  )
}


export async function getServerSideProps (context) {
  const startParams = {
    pageNum: 1,
    pageSize: 1000,
    type: 1,
    date: getStartEndTime().todayStartTime
  }
  const endParams = {
    pageNum: 1,
    pageSize: 1000,
    type: 1,
    date: getStartEndTime().tomorrowEndTime
  }
  const newsTypeid = process.env.NEXT_PUBLIC_Football
  //[获取精彩视频,获取积分榜联赛列表,首页视频锦集,首页录像回放锦集,热门联赛列表,新闻模块数据]
  const [smileVideoData, matchList, videoGreatData, videoBackData, hotMatch, newsListData, todayLiveData, yesterdayLiveData, todayLiveDataBasketball, yesterdayLiveDataBasketball] = await Promise.all([getSlideVideoBack({ num: 10, type: 3 }), getMatchList(), getHomeVideoGreat(), getHomeVideoBackList(), getHostMatchList(11), getNewsList(newsTypeid, 1, 10)
    , getFootballLiveList(startParams),
  getFootballLiveList(endParams),
  getBasketballLiveList(startParams),
  getBasketballLiveList(endParams)
  ])



  const currentDay = [...todayLiveData?.map(row => ({ ...row, matchType: 1 })), ...todayLiveDataBasketball?.map(row => ({ ...row, matchType: 2 }))] //今天的数据

  const yesterday = [...yesterdayLiveData?.map(row => ({ ...row, matchType: 1 })), ...yesterdayLiveDataBasketball?.map(row => ({ ...row, matchType: 2 }))] //明天的数据

  currentDay.sort(function (a, b) { return a.matchTime > b.matchTime ? 1 : -1 })
  yesterday.sort(function (a, b) { return a.matchTime > b.matchTime ? 1 : -1 })
  const smileVideo = { otherData: [], swiperData: [] }
  //处理精彩视频数据
  smileVideo.swiperData = smileVideoData.filter(row => row?.coverImg !== '').slice(0, 3)
  smileVideoData.forEach(row => {
    const index = smileVideo.swiperData.findIndex(r => r.id === row.id)
    if (index === -1) smileVideo.otherData.push(row)
  })

  // //处理新闻数据
  const newsList = { otherData: [], swiperData: [] }
  newsList.swiperData = newsListData?.records?.filter(row => row?.coverImg !== '').slice(0, 3) || []
  newsListData?.records?.forEach(row => {
    const index = newsList.swiperData.findIndex(r => r.id === row.id)
    if (index === -1) newsList.otherData.push(row)
  })
  return {
    props: {
      smileVideo,
      matchList,
      videoGreatData,
      videoBackData,
      hotMatch,
      newsList,
      newsTypeid,
      liveListData: {
        today: {
          time: getStartEndTime().todayStartTime,
          data: currentDay
        },
        yesterday: {
          time: getStartEndTime().tomorrowEndTime,
          data: yesterday
        }
      }
    }, // will be passed to the page component as props
  }
}


export default Index